<template>
  <cv-dialog-form
    v-model:show="show"
    title="添加用户"
    @confirm="addDataService"
  >
    <cv-form :config="form" :data="formData"> </cv-form>
  </cv-dialog-form>
</template>
<script setup lang="ts">
import type { FormConfig } from '@/packages/components'
import { addReq, queryReq, pageQueryReq, updateReq } from '@/utils/http/code'
import { useVModels } from '@vueuse/core'
import {
  AddUserInfoType,
  DepTreeType,
  addUser,
  RoleSelectType,
  getRoleSelect,
  getDepTree,
} from '@/api/system/system-user'
import { PropType } from 'vue'
import { isArray } from 'lodash-es'
const emit = defineEmits(['update:show', 'refreshTable'])
const props = defineProps({
  /**
   * 是否显示弹窗
   */
  show: {
    type: Boolean,
    default: false,
  },
})
const { show } = useVModels(props)

const cascaderProps = {
  value: 'id',
  label: 'name',
}

/**
 * 添加数据
 */
const addDataService = async (data: AddUserInfoType, close: Function) => {
  console.log(data, 'ssss')
  const res = await addUser(formData)
  console.log(res, 'jjjjjj')

  addReq(res, () => {
    //关闭弹窗
    close()
    //刷新表格数据
    emit('refreshTable')
  })
}
const formData = reactive<AddUserInfoType>({
  username: '',
  password: '',
  phone: '',
  avatar: '',
  nickname: '',
  depIds: [],
  rids: [],
})

/**
 *数据添加
 */
const form = reactive<FormConfig<AddUserInfoType>>({
  items: [
    {
      type: 'input',
      prop: 'username',
      label: '用户名',
      width: 400,
      rules: [
        {
          required: true,
        },
        {
          max: 11,
          message: '用户名长度最多11位',
        },
      ],
    },
    {
      type: 'input',
      prop: 'password',
      width: 400,
      label: '用户密码',
      rules: {
        required: true,
      },
    },
    {
      type: 'input',
      prop: 'phone',
      label: '用户手机号',
      width: 400,
      rules: [
        {
          type: 'pattern',
          pattern: /^1[3-9][0-9]{9}$/,
          message: '手机号格式不对',
        },
        {
          required: true,
          type: 'pattern',
          pattern: /^1[3-9][0-9]{9}$/,
          message: '手机号码格式错误',
        },
      ],
    },
    {
      type: 'image-upload',
      prop: 'avatar',
      label: '用户头像',
    },
    {
      type: 'input',
      prop: 'nickname',
      label: '用户昵称',
      width: 400,
      rules: [
        {
          required: true,
        },
        {
          max: 11,
          message: '昵称长度最多10位',
        },
      ],
    },
    {
      type: 'cascader',
      prop: 'depIds',
      label: '部门名称',
      rules: {
        required: false,
      },
      cascader: {
        props: {
          value: 'id',
          label: 'name',
        },
        initData: async ({ setData }) => {
          const res = await getDepTree()
          console.log(res, 'llllllllllllll')

          setData(res.data)
        },
        change: (e) => {
          if (isArray(e)) {
            console.log(e, 'eeeeee')

            formData.depIds = e[e.length - 1] as any
          }
        },
      },
    },

    {
      type: 'select',
      prop: 'rids',
      label: '角色',
      select: {
        label: 'roleName',
        value: 'roleId',
        //select多选
        multiple: true,
        //select最多只能选择3个
        multipleLimit: 3,
        //自定义加载数据
        initData: async ({ setData }) => {
          const res = await getRoleSelect()
          setData(res.data)
        },
      },
    },
  ],
})
</script>
<style lang="scss" scoped></style>
